<script setup lang="ts">
import { ref, h } from "vue";
import {
  EditOutlined,
  DeleteOutlined,
  AlignLeftOutlined,
} from "@ant-design/icons-vue";
import Drawer from "./components/Drawer.vue";
const dataSource = ref([
  {
    avatar: "",
    username: "Admin",
    roles: [0, 1, 2],
    status: 0,
  },
  {
    avatar: "",
    username: "Admin",
    roles: [0],
    status: 1,
  },
]);
const columns = ref([
  {
    title: "头像",
    dataIndex: "avatar",
    key: "avatar",
    width: 80,
    align: "center",
  },
  {
    title: "姓名",
    dataIndex: "username",
    key: "username",
  },
  {
    title: "角色",
    dataIndex: "roles",
    key: "roles",
  },
  {
    title: "状态",
    dataIndex: "status",
    key: "status",
  },
  {
    title: "操作",
    key: "action",
    width: 260,
    align: "center",
  },
]);
const pagination = ref({
  pageSize: 10, //每页条数
  total: 100, //	数据总数
  size: "large", //	当为「small」时，是小尺寸分页
  showSizeChanger: true, //是否展示 pageSize 切换器，当 total 大于 50 时默认为 true
  showTotal: (total: number) => `共 ${total} 条`, //用于显示数据总量和当前数据顺序
  onChange: (page: number, pageSize: number) => {
    //页码或 pageSize 改变的回调，参数是改变后的页码及每页条数
    console.log(page, pageSize);
  },
});
const drawerOptions = ref({
  title: "新增",
  state: 0, // 0新增 1 编辑
  options: null,
});
// 抽屉DOM 节点
const drawerRefs = ref();
// 打开抽屉
const openDrawer = (state: number, record: any) => {
  if (state === 1) {
    drawerOptions.value = {
      title: "编辑",
      state: 1,
      options: record,
    };
  } 
  if (state === 0) {
    drawerOptions.value = {
      title: "新增",
      state: 0,
      options: null,
    };
  }
  if (state === 2) {
    drawerOptions.value = {
      title: "查看详情",
      state: 2,
      options: record,
    };
  }
  drawerRefs.value.open = true;
};
</script>

<template>
  <a-card>
    <a-form layout="inline">
      <a-form-item>
        <a-input placeholder="请输入" />
      </a-form-item>
      <a-form-item>
        <a-input placeholder="请输入" />
      </a-form-item>
      <a-form-item>
        <a-input placeholder="请输入" />
      </a-form-item>
      <a-form-item>
        <a-input placeholder="请输入" />
      </a-form-item>
      <a-form-item>
        <a-button type="primary">搜索</a-button>
      </a-form-item>
      <a-form-item>
        <a-button>重置</a-button>
      </a-form-item>
    </a-form>
  </a-card>
  <a-card class="mt-2" :bodyStyle="{ padding: '15px' }">
    <div class="flex justify-between mb-4">
      <a-space>
        <a-button type="primary" @click="openDrawer(0)">新增</a-button>
      </a-space>
      <div class="flex items-center">
        <span class="operation-btn"
          ><i class="iconfont icon-RectangleCopy9"></i
        ></span>
      </div>
    </div>
    <a-table
      :dataSource="dataSource"
      :columns="columns"
      bordered
      :pagination="pagination"
      :resizable="true"
      size="middle"
    >
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'roles'">
          <span v-for="item in record.roles">
            <a-tag color="blue" v-if="item == 0">超级管理员</a-tag>
            <a-tag color="blue" v-if="item == 1">管理员</a-tag>
            <a-tag color="blue" v-if="item == 2">普通用户</a-tag>
          </span>
        </template>
        <template v-if="column.key === 'status'">
          <a-tag color="blue" v-if="record.status == 0">启用</a-tag>
          <a-tag color="red" v-if="record.status == 1">禁用</a-tag>
        </template>
        <template v-if="column.key === 'action'">
          <span>
            <a-button
              type="text"
              size="small"
              :icon="h(EditOutlined)"
              class="text-blue-600"
              @click="openDrawer(1, record)"
              >编辑</a-button
            >
            <a-divider type="vertical" />
            <a-button
              type="text"
              size="small"
              :icon="h(AlignLeftOutlined)"
              class="text-blue-600"
              @click="openDrawer(2, record)"
              >详情</a-button
            >
            <a-divider type="vertical" />
            <a-button type="text" size="small" danger :icon="h(DeleteOutlined)"
              >删除</a-button
            >
          </span>
        </template>
      </template>
    </a-table>
  </a-card>
  <Drawer ref="drawerRefs" :drawerOptions="drawerOptions" />
</template>

<style scoped></style>
